<template>
  <a-card title="骑行信息" :bordered="false" :loading="loading">
    <template slot="extra">
      <slot name="extra"></slot>
    </template>
    <template v-if="card === null || card.cardState !== 0">
      <p>用户暂未绑定租借卡或租借卡已挂失，请先前往绑定租借卡</p>
      <p>
        <a-button type="primary" style="margin-top: 8px" @click="gotoApply">前往绑定</a-button>
      </p>
    </template>
    <template v-else-if="ride !== null">
      <p>
        您
        <a-tag>正在</a-tag>
        骑行
      </p>
      <p>您目前正在租用车辆编号为
        <a-tag>{{ ride.bikeNumber }}</a-tag>
        的车辆
      </p>
      <p>您目前已经骑行了
        <a-tag>{{ rideTime[0] }}</a-tag>
        小时
        <a-tag>{{ rideTime[1] }}</a-tag>
        分钟
      </p>
      <p>
        当前停车的费用是
        <a-tag>{{ cost }}</a-tag>
        元
      </p>
    </template>
    <template v-else>
      <p>
        您
        <a-tag>没有在</a-tag>
        骑行
      </p>
      <p>您的租价卡
        <a-tag>{{ card.cardNumber }}</a-tag>
        还有余额
        <a-tag>{{ card.balance }}</a-tag>
        元
      </p>
      <p v-if="card.balance <= 0">您的租借卡余额不足，请前往充值以免影响使用</p>
    </template>
  </a-card>
</template>

<script>
import BikeCost from "@/views/dashboard/BikeCost";
import {queryCard} from "@/api/bike/card";
import {queryRide} from "@/api/bike/ride";
import moment from "moment";

let that

export default {
  name: "RideView",
  components: {BikeCost},
  props: {
    card: {
      type: Object,
      default: null,
    },
    ride: {
      type: Object,
      default: null,
    },
    loading: {
      type: Boolean,
      default: true,
    },
    duringSecond: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      rideTime: [0, 0],
      cost: 0,
      calcSecond: this.duringSecond,
    }
  },
  watch: {
    duringSecond (val) {
      this.calcSecond = val
    },
    calcSecond (val) {
      let minute = Math.floor(val / 60)
      let hour = Math.floor(minute / 60)
      this.rideTime = [hour, minute - hour * 60]
      this.cost = hour < 6 ? hour + 1 : 6
    }
  },
  beforeCreate () {
    that = this
  },
  created () {
  },
  methods: {
    setTimer () {
      setTimeout(() => {
        this.calcSecond++
        this.setTimer()
      }, 1000)
    },
    gotoApply () {
      this.$router.push({path: '/bike/card'})
    },
  }
}
</script>

<style scoped>

</style>
